<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户信息</title>
<script language="javascript" src="${pageContext.request.contextPath}/script/jquery.js"></script>
    <script language="javascript" src="${pageContext.request.contextPath}/script/pageCommon.js" charset="utf-8"></script>
    <script language="javascript" src="${pageContext.request.contextPath}/script/PageUtils.js" charset="utf-8"></script>
    <script language="javascript" src="${pageContext.request.contextPath}/script/DemoData.js" charset="utf-8"></script>
	<script language="javascript" src="${pageContext.request.contextPath}/script/DataShowManager.js" charset="utf-8"></script>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/style/blue/pageCommon.css" />
    <script type="text/javascript">
    	$(function(){
    		// >：将左边列表中选中的项移入到右边的列表
    		$("#btn1").bind('click',function(){
    			var $leftRoleIdList=$("#leftRoleIdList");//左边的列表
    			var $rightRoleIdList=$("#rightRoleIdList");//右边的列表
    			
    			$("#leftRoleIdList option:selected").each(function(i,ele){
    				$("#rightRoleIdList").append($(ele));
    			});
    		});
    		
    		// >>：将左边列表中所有项移入到右边的列表
    		$("#btn2").bind('click',function(){
    			var $leftRoleIdList=$("#leftRoleIdList");//左边的列表
    			var $rightRoleIdList=$("#rightRoleIdList");//右边的列表
    			
    			$("#leftRoleIdList option").each(function(i,ele){
    				$("#rightRoleIdList").append($(ele));
    			});
    		});
    		
    		// <：将右边列表中选中的项移入到左边的列表
    		$("#btn3").bind('click',function(){
    			var $leftRoleIdList=$("#leftRoleIdList");//左边的列表
    			var $rightRoleIdList=$("#rightRoleIdList");//右边的列表
    			
    			$("#rightRoleIdList option:selected").each(function(i,ele){
    				$("#leftRoleIdList").append($(ele));
    			});
    		});
    		
    		// <<：将右边列表中所有项移入到左边的列表
    		$("#btn4").bind('click',function(){
    			var $leftRoleIdList=$("#leftRoleIdList");//左边的列表
    			var $rightRoleIdList=$("#rightRoleIdList");//右边的列表
    			
    			$("#rightRoleIdList option").each(function(i,ele){
    				$("#leftRoleIdList").append($(ele));
    			});
    		});
    	});
		
		
		function onCheck(){
			//在submit提交前选中右边列表中的所有项
			$("#rightRoleIdList option").each(function(i,ele){
   				$(ele).attr("selected","selected");
   			});
   			return true;
		}    
    </script>
</head>
<body>

<!-- 标题显示 -->
<div id="Title_bar">
    <div id="Title_bar_Head">
        <div id="Title_Head"></div>
        <div id="Title"><!--页面标题-->
            <img border="0" width="13" height="13" src="${pageContext.request.contextPath}/style/images/title_arrow.gif"/> 用户信息
        </div>
        <div id="Title_End"></div>
    </div>
</div>

<!--显示表单内容-->
<div id=MainArea>
    <form action="${pageContext.request.contextPath}/jsp/sys/zwl/user/userServlet" method="post" onsubmit="return onCheck();">
    	<input type="hidden" name="opr" value="${param.fromMode }" />
    	<input type="hidden" name="userId" value="${user.id }" />
        <div class="ItemBlock_Title1"><!-- 信息说明 --><div class="ItemBlock_Title1">
        	<img border="0" width="4" height="7" src="${pageContext.request.contextPath}/style/blue/images/item_point.gif" /> 用户信息 </div> 
        </div>
        
        <!-- 表单内容显示 -->
        <div class="ItemBlockBorder">
            <div class="ItemBlock">
                <table cellpadding="0" cellspacing="0" class="mainForm">
                    <tr><td width="100">部门</td>
                        <td><select name="deptId" class="SelectStyle">
                                <option value="" selected="selected">请选择部门</option>
                                <c:if test="${deptList!=null && deptList.size()>0 }">
                                	<c:forEach items="${deptList }" var="d1">
                                		<option value="${d1.id }" ${d1.id==user.userDetail.dept.id?"selected='selected'":"" }>${d1.name }</option>
                                	</c:forEach>
                                </c:if>
                            </select> 
                        </td>
                    </tr>
                    <tr><td>登录名</td>
                        <td>
                        	<input type="text" name="loginName" value="${user.loginName }" class="InputStyle"/> *
						</td>
                    </tr>
                    <tr><td>姓名</td>
                        <td>
                        	<input type="text" name="name" value="${user.userDetail.name }" class="InputStyle"/> *
						</td>
                    </tr>
					<tr><td>性别</td>
                        <td>
                        	<input type="radio" name="sex" value="1" ${user.userDetail.sex=="1"?"checked='checked'":"" } id="male" /><label for="male">男</label>
                        	<input type="radio" name="sex" value="0" ${user.userDetail.sex!="1"?"checked='checked'":"" } id="female" /><label for="female">女</label>
						</td>
                    </tr>
					<tr><td>联系电话</td>
                        <td><input type="text" name="telephone" value="${user.userDetail.telephone }" class="InputStyle"/></td>
                    </tr>
                    <tr><td>邮箱</td>
                        <td><input type="text" name="email" value="${user.userDetail.email }" class="InputStyle"/></td>
                    </tr>
                    <tr><td>备注</td>
                        <td>
                        	<textarea name="remark" class="TextareaStyle">${user.userDetail.remark }</textarea>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        
        <c:if test="${param.fromMode=='update' }">
	        <div class="ItemBlock_Title1"><!-- 信息说明 --><div class="ItemBlock_Title1">
	        	<img border="0" width="4" height="7" src="../style/blue/images/item_point.gif" /> 角色设置 </div> 
	        </div>
	        
	        <!-- 表单内容显示 -->
	        <div class="ItemBlockBorder">
	            <div class="ItemBlock">
	                <table cellpadding="0" cellspacing="0" class="mainForm">
	                    <tr>
							<td width="100">
							角色
							</td>
	                        <td>
	                        	<!-- 左边的角色列表：当前用户未分配的角色 -->
	                        <select name="leftRoleIdList" id="leftRoleIdList" title="左边的角色列表：当前用户未分配的角色"
	                        	multiple="true" size="10" class="SelectStyle">
		                        	<c:if test="${leftRoleIdList!=null && leftRoleIdList.size()>0 }">
	                                	<c:forEach items="${leftRoleIdList }" var="leftRole">
	                                		<option value="${leftRole.id }">${leftRole.name }</option>
	                                	</c:forEach>
	                                </c:if>
	                            </select>
	                        </td>
	                        <td>
	                        	<input type="button" id="btn1" value="&gt;" /><br/>
	                        	<input type="button" id="btn2" value="&gt;&gt;" /><br/>
	                        	<input type="button" id="btn3" value="&lt;" /><br/>
	                        	<input type="button" id="btn4" value="&lt;&lt;" /><br/>
	                        </td>
	                        <td>
	                        	<!-- 右边的角色列表：当前用户已分配的角色 -->
	                        	<select name="rightRoleIdList" id="rightRoleIdList" title="右边的角色列表：当前用户已分配的角色"
	                        		 multiple="true" size="10" class="SelectStyle">
	                                <c:if test="${rightRoleIdList!=null && rightRoleIdList.size()>0 }">
	                                	<c:forEach items="${rightRoleIdList }" var="rightRole">
	                                		<option value="${rightRole.id }">${rightRole.name }</option>
	                                	</c:forEach>
	                                </c:if>
	                            </select>
	                            按住Ctrl键可以多选或取消选择
	                        </td>
	                    </tr>
	                </table>
	            </div>
	        </div>	
        </c:if>
        
        <!-- 表单操作 -->
        <div id="InputDetailBar">
            <input type="image" src="${pageContext.request.contextPath}/style/images/save.png"/>
            <a href="javascript:history.go(-1);"><img src="${pageContext.request.contextPath}/style/images/goBack.png"/></a>
        </div>
    </form>
</div>

</body>
</html>